<template>
	<div class="ele-body">
		<a-card :bordered="false" title="首饰采购信息">
			<table cellpadding="0" cellspacing="0" class="recepit_table2">
				<tbody>
					<tr>
						<td class="tit">单号</td>
						<td>{{ receipts_detail.code || '' }}</td>
						<td class="tit">所属位置</td>
						<td>{{ receipts_detail.come_type_name || '' }}</td>
						<td class="tit">总数量</td>
						<td>1</td>
						<td class="tit">总金重（g)</td>
						<td>{{ receipts_detail.total_gold_weight || '' }}</td>
					</tr>
					<tr>
						<td class="tit">总件重（g)</td>
						<td>{{ receipts_detail.piece_weight || ''}}</td>
						<td class="tit">总标价</td>
						<td>{{ receipts_detail.total_sticker_price || ''}}</td>
						<td class="tit">总成本</td>
						<td>{{ receipts_detail.total_cost || ''}}</td>
						<td class="tit">采购员</td>
						<td>{{ receipts_detail.purchase_user_name || '' }}</td>
					</tr>
					<tr>
						<td class="tit">制单人</td>
						<td>{{ receipts_detail.make_user_name || '' }}</td>
						<td class="tit">审核状态</td>
						<td>{{ receipts_detail.status_name || '' }}</td>
						<td class="tit">审核人</td>
						<td>{{ receipts_detail.verify_user_name || '' }}</td>
						<td class="tit">审核时间</td>
						<td>{{ receipts_detail.verify_time || '' }}</td>
					</tr>
					<tr>
						<td class="tit">初始操作时间</td>
						<td>{{ receipts_detail.create_time || '' }}</td>
						<td class="tit">最后操作时间</td>
						<td>{{ receipts_detail.end_time || '' }}</td>
						<td class="tit">最后操作人</td>
						<td>{{ receipts_detail.end_user_name || '' }}</td>
						<td class="tit">业务日期</td>
						<td>{{ receipts_detail.business_time || '/' }}</td>
					</tr>
				</tbody>
			</table>
			<div class="margin-y-30">
				<a-space>
					<a-button type="primary" class="ele-btn-icon" @click="toAdd()"><span>添加货品</span></a-button>
					<a-button class="btn" @click="daoru()"><span>模板导入</span></a-button>
				</a-space>

				<a-form
					class="margin-y-15"
					:label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
					:wrapper-col="{
						md: { span: 17 },
						sm: { span: 20 },
						xs: { span: 24 }
					}"
				>
					<a-row :gutter="24">
						<a-col :md="10" :sm="24" :xs="24">
							<vxe-table
								ref="goodsTable"
								align="center"
								:data="tableData0">
								<vxe-column type="seq" title="序号" width="60"></vxe-column>
								<vxe-column field="bar_code" title="条形码"></vxe-column>
								<vxe-column field="class_name" title="货品大类"></vxe-column>
								<vxe-column field="subclass_name" title="货品种类"></vxe-column>
								<vxe-column field="name" title="货品名称"></vxe-column>
								<vxe-column field="num" title="数量"></vxe-column>
								<vxe-column title="操作" width="120">
									<template #default="{ row, seq }"> 
										<a-space>
											<a @click="getRowSeq(seq)">查看</a>
											<a @click="delGoods(row)">删除</a>
											<a @click="edit(row)">编辑</a>
										</a-space>
									</template>
							    </vxe-column>
							</vxe-table>
						</a-col>
						<a-col :md="14" :sm="24" :xs="24">
							<table cellpadding="0" cellspacing="0" class="recepit_table">
								<tbody>
									<tr><td class="fw-bolder" colspan="8" style="background-color: #f5f5f5">货品详情</td></tr>
									<tr>
										<td>条形码</td>
										<td>{{ goods.bar_code || '' }}</td>
										<td>货品种类</td>
										<td>{{ goods.subclass_name || '' }}</td>
										<td>货品大类</td>
										<td>{{ goods.class_name || '' }}</td>
										<td rowspan="2">图片</td>
										<td rowspan="2">
											<img :src="goods.thumb_url" style="width:60px;height:60px;" v-if="goods.thumb_url">
										</td>
									</tr>
									<tr>
										<td>货品名称</td>
										<td>{{ goods.name || '' }}</td>
										<td>货品成色</td>
										<td>{{ goods.quality_name || '' }}</td>
										<td>货品款式</td>
										<td>{{ goods.style_name || '' }}</td>
									</tr>
									<tr>
										<td>二级款式</td>
										<td>{{ goods.sub_style || '' }}</td>
										<td>净金重(g)</td>
										<td>{{ goods.gold_weight || '' }}</td>
										<td>总件重(g)</td>
										<td>{{ goods.piece_weight || '' }}</td>
										<td>内部款号</td>
										<td>{{ goods.style_model || '' }}</td>
									</tr>
									<tr>
										<td>手寸</td>
										<td>{{ goods.hand_inch || '' }}</td>
										<td>长度 (cm)</td>
										<td>{{ goods.length || '' }}</td>
										<td>内径(mm)</td>
										<td>{{ goods.inner_diameter || '' }}</td>
										<td>尺寸(mm)</td>
										<td>{{ goods.size || '' }}</td>
									</tr>
									<tr>
										<td>主石零售价</td>
										<td>{{ goods.main_stone_retail_price || '' }}</td>
										<td>工费零售方式</td>
										<td>
											<template v-if="goods.retail_labour_type==1">计件</template>
											<template v-else-if="goods.retail_labour_type==2">计克</template>
										</td>
										<td>零售方式</td>
										<td>
											<template v-if="goods.retail_type==1">计件</template>
											<template v-else-if="goods.retail_type==2">计克</template>
										</td>
										<td>标签价</td>
										<td>{{ goods.sticker_price || '' }}</td>
									</tr>
									<tr>
										<td>采购金价</td>
										<td>{{ goods.purchase_gold_price || '' }}</td>
										<td>采购工费</td>
										<td>{{ goods.purchase_labour_expenses || '' }}</td>
										<td>采购总额</td>
										<td>{{ goods.purchase_labour_amount || '' }}</td>
										<td>金料金价</td>
										<td>{{ goods.gold_material_price || '' }}</td>
									</tr>
									<tr>
										<td>损耗(0-1)</td>
										<td>{{ goods.loss || '' }}</td>
										<td>基础工费</td>
										<td>{{ goods.basic_labour || '' }}</td>
										<td>特殊工费</td>
										<td>{{ goods.special_labour || '' }}</td>
										<td>其他费用</td>
										<td>{{ goods.other_fee || '' }}</td>
									</tr>
									<tr>
										<td>证书费</td>
										<td>{{ goods.cert_fee || '' }}</td>
										<td>品牌附加费</td>
										<td>{{ goods.brand_extra_fee || '' }}</td>
										<td>成本</td>
										<td>{{ goods.cost || '' }}</td>
										<td>倍率</td>
										<td>{{ goods.multiplying_power || '' }}</td>
									</tr>
									<tr>
										<td>分销成本</td>
										<td>{{ goods.retail_cost || '' }}</td>
										<td>分销倍率</td>
										<td>{{ goods.retail_multiplying_power || '' }}</td>
										<td>数量</td>
										<td>{{ goods.num || '' }}</td>
										<td>证书1类型</td>
										<td>{{ goods.cert_first_cate || '' }}</td>
									</tr>
									<tr>
										<td>证书1编号</td>
										<td>{{ goods.cert_first_code || '' }}</td>
										<td>证书2类型</td>
										<td>{{ goods.cert_second_cate || '' }}</td>
										<td>证书2编号</td>
										<td>{{ goods.cert_second_code || '' }}</td>
										<td>经营品牌</td>
										<td>{{ goods.management_brand || '' }}</td>
									</tr>
									<tr>
										<td>品牌</td>
										<td>{{ goods.brand || '' }}</td>
										<td>贵金属颜色</td>
										<td>{{ goods.color || '' }}</td>
										<td>供应商名称</td>
										<td>{{ goods.supplier_name || '' }}</td>
										<td>供应商条码</td>
										<td>{{ goods.supplier_bar || '' }}</td>
									</tr>
									<tr>
										<td>供应商款号</td>
										<td>{{ goods.supplier_style_name || '' }}</td>
										<td>系列名称</td>
										<td>{{ goods.series_name || '' }}</td>
										<td>系列款式</td>
										<td>{{ goods.series_style_name || '' }}</td>
										<td>监管码</td>
										<td>{{ goods.supervision_code || '' }}</td>
									</tr>
									<tr>
										<td>旧条码号</td>
										<td>{{ goods.old_bar_code || '' }}</td>
										<td>财务分类</td>
										<td>{{ goods.finance_name || '' }}</td>
										<td>赠品类型</td>
										<td>{{ goods.gift_name || '' }}</td>
										<td>工艺类型</td>
										<td>{{ goods.technology_name || '' }}</td>
									</tr>
									<tr>
										<td>价格类型</td>
										<td>{{ goods.price_category_name || '' }}</td>
										<td>宝石类别</td>
										<td>{{ goods.gem_category_name || '' }}</td>
										<td>备注1</td>
										<td>{{ goods.note_first || '' }}</td>
										<td>备注2</td>
										<td>{{ goods.note_second || '' }}</td>
									</tr>
								</tbody>
							</table>

							<div>
								<div class="fs-16 fw-bolder margin-y-15">主石信息</div>
								<div>
									<vxe-table border show-overflow :column-config="{ resizable: true }" :loading="table1.loading" :data="table1.tableData">
										<vxe-column type="seq" title="NO" width="60" fixed="left" />
										<vxe-column field="name" title="石料名称" width="150" />
										<vxe-column field="gem_category_name" title="宝石类别" width="150" />
										<vxe-column field="price" title="单价" width="150" />
										<vxe-column field="num" title="数量" width="150" />
										<vxe-column field="amount" title="总价" width="150" />
										<vxe-column field="weight" title="重量" width="150" />
										<vxe-column field="stone_name" title="石号" width="150" />
										<vxe-column field="form_name" title="形状" width="150" />
										<vxe-column field="color_name" title="颜色" width="150" />
										<vxe-column field="neatness_name" title="净度" width="150" />
										<vxe-column field="cut_name" title="切工" width="150" />
										<vxe-column field="buffing_name" title="抛光" width="150" />
										<vxe-column field="symmetric_name" title="对称" width="150" />
										<vxe-column field="fluorescence_name" title="荧光" width="150" />
										<vxe-column field="fluorescence_color" title="荧光颜色" width="150" />
										<vxe-column field="inlay_fee" title="镶嵌工费" width="150" />
										<vxe-column field="cert_fee" title="证书费" width="150" />
										<vxe-column field="cert_cate" title="证书类型" width="150" />
										<vxe-column field="cert_code" title="证书编号" width="150" />
									</vxe-table>
								</div>
							</div>
							<div>
								<div class="fs-16 fw-bolder margin-y-15">副石信息</div>
								<div>
									<vxe-table border show-overflow ref="xTable" :column-config="{ resizable: true }" :loading="table2.loading" :data="table2.tableData">
										<vxe-column type="seq" title="NO" width="60" fixed="left" />
										<vxe-column field="name" title="石料名称" width="150" />
										<vxe-column field="gem_category_name" title="宝石类别" width="150" />
										<vxe-column field="price" title="单价" width="150" />
										<vxe-column field="num" title="数量" width="150" />
										<vxe-column field="amount" title="总价" width="150" />
										<vxe-column field="weight" title="重量" width="150" />
										<vxe-column field="stone_name" title="石号" width="150" />
										<vxe-column field="form_name" title="形状" width="150" />
										<vxe-column field="color_name" title="颜色" width="150" />
										<vxe-column field="neatness_name" title="净度" width="150" />
										<vxe-column field="cut_name" title="切工" width="150" />
										<vxe-column field="buffing_name" title="抛光" width="150" />
										<vxe-column field="symmetric_name" title="对称" width="150" />
										<vxe-column field="fluorescence_name" title="荧光" width="150" />
										<vxe-column field="fluorescence_color" title="荧光颜色" width="150" />
										<vxe-column field="inlay_fee" title="镶嵌工费" width="150" />
										<vxe-column field="cert_fee" title="证书费" width="150" />
										<vxe-column field="cert_cate" title="证书类型" width="150" />
										<vxe-column field="cert_code" title="证书编号" width="150" />
									</vxe-table>
								</div>
							</div>
						</a-col>
					</a-row>
				</a-form>
			</div>
		</a-card>

		<!-- 模板导入弹窗 -->
		<ele-modal :width="550" :visible="visible" :confirm-loading="loading" title="导入" :body-style="{ paddingBottom: '8px' }" @update:visible="updateVisible" @ok="save">
			<a-form :wrapper-col="{ md: { span: 24 }, sm: { span: 24 }, xs: { span: 24 } }">
				<a-row :gutter="24">
					<a-col :md="24" :sm="24" :xs="24">
						<a-form-item>
							<div style="margin:30px 30px;">
								<div class="flex align-center justify-between">
									<div>请选择导入的文件</div>
									<a @click="daochu()">下载模板文件</a>
								</div>
								<div class="margin-top-15">
									<a-upload-dragger
										name="file"
										:headers="{Authorization: token }"
										:data="{ code: query.code }"
										v-model:file-list="fileList"
										:action="uploadFileUrl"
										:max-count="1"
										list-type="text"
										:show-upload-list="true"
										@remove="handleRemove"
										@change="uploadHandler"
									>
										<div>
											<loading-outlined v-if="loading" />
											<img class="daoru_img" src="@/assets/daoru.png" v-else />
											<div class="ele-text-primary">点击上传</div>
										</div>
									</a-upload-dragger>
								</div>
							</div>
							<div>
								<div class="fs-14 color-999">1、仅支持.xlsx和.csv的Excel文件，推荐.csv文件，导入速度更快。</div>
								<div class="fs-14 color-999">2、3000行以上的数据仅支持.csv文件，请在Excel另存为CSV文件后再导入。</div>
								<div class="fs-14 color-999">3、仅支持Excel文件中第一个表格的数据导入。</div>
								<div class="fs-14 color-999">4、根据表格第一行标题自动匹配数据，第一行作为标题不导入数据。</div>
							</div>
						</a-form-item>
					</a-col>
				</a-row>
			</a-form>
		</ele-modal>
	</div>
</template>

<script setup>
import { ref, reactive, unref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { message, Modal } from 'ant-design-vue';
import { DownOutlined, UpOutlined, PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import { uploadFileUrl } from '@/config/setting';
import { daochuFn } from '@/utils/daochu.js';
import { getToken } from '@/utils/token-util.js';
import { receipts_purchase_detail, download_import_template_purchase, del_goods } from '@/api/jewelry/receipts_purchase';


const { currentRoute, push } = useRouter();
const { query } = unref(currentRoute);
console.log(query);
const loading = ref(false);
const token = getToken();
const receipts_detail = ref({});
const goods = ref({});
const visible = ref(false);
//货品list
const tableData0 = ref([]);
const goodsTable = ref(null);
//主石
const master_gem = ref([]);
//副石
const slave_gem = ref([]);

const fileList = ref([
	/* {
	  uid: '1',
	  name: 'xxx.png',
	  status: 'done',
	  response: 'Server Error 500',
	  url: 'http://www.baidu.com/xxx.png'
	} */
]);
const handleRemove = file => {
  const index = fileList.value.indexOf(file);
  const newFileList = fileList.value.slice();
  newFileList.splice(index, 1);
  fileList.value = newFileList;
};
const beforeUpload = file => {
  fileList.value = [...fileList.value, file];
  return false;
};
const save = () => {
	const formData = new FormData();
  console.log("fileList.value", fileList.value)
	  fileList.value.forEach(file => {
		formData.append('files[]', file);
	  });
	  formData.set('code', query.code);
	  console.log("formData:", formData);
};


/* 完全自己控制选择文件后的处理 */
const uploadHandler = info => {
	console.log("info", info)
	if (info && info.file && info.file.response) {
		const data = info.file.response.data;
		/* imageUrl.value = data.path;
      form.thumb = data.id; */
	}
};
const handleDrop = e => {
	console.log('上传', e);
};

const getRowSeq = (seq)=>{
	console.log("row111", seq);
	goods.value = tableData0.value[seq-1];
	table1.tableData = tableData0.value[seq-1].master_gem;
	table2.tableData = tableData0.value[seq-1].slave_gem;
}
const delGoods = (row)=>{
	console.log("row222", row);
	Modal.confirm({
		title: '提示',
		content: '确认删除？',
		okText: '确认',
		cancelText: '取消',
		onOk:()=>{
			del_goods({ code: query.code, goods_code:row.code }).then(res => {
				message.success(res.msg);
				getDetail();
			}).catch((e) => {
				message.error(e);
			});
		}
	});
}
const edit = (row)=>{
	push(`/jewelry/receipts_purchase/edit?code=${query.code}&goods_code=${row.code}` );
}

//主石信息
const table1 = reactive({
	loading: false,
	tableData: [
		{
			type: 1,
			name: '',
			gem_category_name: '',
			price: '',
			amount: '',
			num: 1,
			weight: '',
			stone_code: '',
			form: '',
			specs: '',
			color: '',
			neatness: '',
			cut: '',
			buffing: '',
			symmetric: '',
			fluorescence: '',
			fluorescence_color: '',
			inlay_fee: '',
			cert_fee: '',
			cert_cate: '',
			cert_code: ''
		}
	]
});
//副石信息
const table2 = reactive({
	loading: false,
	tableData: [
		{
			type: 2,
			name: '',
			gem_category_name: '',
			price: '',
			amount: '',
			num: 1,
			weight: '',
			stone_code: '',
			form: '',
			specs: '',
			color: '',
			neatness: '',
			cut: '',
			buffing: '',
			symmetric: '',
			fluorescence: '',
			fluorescence_color: '',
			inlay_fee: '',
			cert_fee: '',
			cert_cate: '',
			cert_code: ''
		}
	]
});

onMounted(() => {
	getDetail();
});
const getDetail = ()=>{
	receipts_purchase_detail({ code: query.code }).then(res => {
		console.log('res', res);
		tableData0.value = res.goods;
		receipts_detail.value = res.receipts_detail;
		if(res.goods.length > 0){
			goods.value = res.goods[0];
			table1.tableData = res.goods[0].master_gem;
			table2.tableData = res.goods[0].slave_gem;
		}
	});
}
const toAdd = () => {
	push('/jewelry/receipts_purchase/add?code=' + query.code);
};

const daoru = () => {
	visible.value = true;
};

const daochu = () => {
	let data = {
			  url:'jewelry/receipts_purchase/import_template_purchase',
			  params:{},
			  filename:'货品导入模板'
	}
	daochuFn(data);
};

/* 更新visible */
const updateVisible = value => {
	console.log('value', value);
	visible.value = value;
};
</script>

<style lang="less" scoped>
:deep(.ant-upload.ant-upload-select.ant-upload-select-text) {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 440px !important;
	height: 180px !important;
	background-color: #fafafa;
	border: 1px dashed #d9d9d9;
	.ant-upload {
		flex: 1;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}
}
</style>
